<template>
  <div class="usertype-list">
    <el-button type="custom" plain @click="handleAdd">新增</el-button>
    <div class="custom-tree-container">
      <div class="hedtitle">
        <p class="show-son">角色类型</p>
        <span class="edit">操作</span>
      </div>
      <ul>
        <li v-for="v in tableData" :key="v.id">
          <el-row :gutter="20">
            <el-col :span="16">
              <p
                :class="['sheng', { active: v.id == activeId }]"
                @click="handleClick(v)"
                >{{ v.deName }}</p
              >
            </el-col>
            <el-col :span="8">
              <el-button type="text" size="mini" @click="handleEdit(v)"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="mini"
                :disabled="v.deValue <= 40"
                @click="handleDelete(v)"
                >删除</el-button
              >
            </el-col>
          </el-row>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { tbDictDetailDelete } from '@/api/admin/system/dictionaryDet.js'
export default {
  data() {
    return {
      activeId: '',
    }
  },
  props: ['tableData'],
  methods: {
    handleClick(row) {
      this.activeId = this.activeId == row.id ? '' : row.id
      let userType = this.activeId ? row.deValue : ''
      this.$bus.$emit('refreshRoleList', { userType })
    },
    handleAdd() {
      this.$bus.$emit('showDialogUserTypeAdd')
    },
    handleEdit(row) {
      this.$bus.$emit('showDialogUserTypeAdd', row)
    },
    handleDelete(row) {
      this.deleteTips(() => {
        tbDictDetailDelete(row.id).then((res) => {
          this.$bus.$emit('refreshUserTypeList')
        })
      })
    },
  },
}
</script>
<style scoped lang="scss">
.usertype-list {
  ul {
    padding: 0 5px;
    background: #fff;
    li {
      line-height: 32px;
      border-bottom: 1px solid #eee;

      p {
        color: #333;
        font: 14px;
        cursor: pointer;
        &.active,
        &:hover {
          color: var(--colorH1);
        }
      }
    }
  }
}
</style>
<style scoped>
.custom-tree-container {
  margin-top: 10px;
  padding: 0px 10px 10px 10px;
  background: #f5f7fa;
}
.hedtitle {
  border-bottom: 1px solid #ebeef5;
  color: #585858;
  font-weight: 800;
  font-size: 14px;
  position: relative;
  /* padding-bottom: 7px; */
  padding: 5px 0;
}
.hedname {
  padding-left: 20px;
}
.show-son {
  /* float: left; */
  display: inline-block;
}
.edit {
  float: right;
  margin-right: 20px;
}
</style>